<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="300px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-form-item label="快递公司" prop="freight_name">
				<el-select
					v-model="form.freight_name"
					:remote-method="companyRemoteMethod"
					:loading="companyLoading"
					@focus="onCompanyFocus"
					@clear="onCompanyClear"
					@change="onChangeCompany"
					filterable
					remote
					clearable
					placeholder="快递公司"
					class="w100"
				>
					<el-option v-for="item in companyOptions" :key="item.id" :label="item.name" :value="item.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="快递单号" prop="freight_sn">
				<el-input type="text" v-model="form.freight_sn" placeholder="请输入快递单号"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { orderDelivery, orderSelectShipperCode, orderUpdateFreight } from '/@/api/admin1/index';
import { ElMessage } from 'element-plus';
export default {
	name: 'deliveryDialog',
	components: {},
	setup() {
		const state = reactive({
			title: '发货',
			open: false,
			form: {} as any,
			rules: {
				freight_name: [{ required: true, message: '快递公司不能为空', trigger: ['blur', 'change'] }],
				freight_sn: [{ required: true, message: '快递单号不能为空', trigger: 'blur' }],
			}, // 表单校验
			submitLoading: false,
			companyOptions: [] as any,
			companyLoading: false,
		});

		const formRef = ref(null);
		const imageUploadThumbRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.form);
					state.form.type == 1 && _orderDelivery(state.form);
					state.form.type == 2 && _orderUpdateFreight(state.form);
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
			nextTick(() => {
				(imageUploadThumbRef.value as any)?.dataLoading();
			});
		};
		//点击快递公司
		const onChangeCompany = (val: any) => {
			console.log(val);
			let companyData = state.companyOptions.filter((item: any) => item.name == val);
			console.log(companyData);
			if (companyData.length) {
				state.form.freight_number = companyData[0].code;
			}
		};
		// 选择快递公司
		const onCompanyFocus = () => {
			if (!state.form.freight_name) {
				state.companyLoading = true;
				_orderSelectShipperCode({ pageNum: 1, pageSize: 20 });
			}
		};
		// 清空快递公司
		const onCompanyClear = () => {
			_orderSelectShipperCode({ pageNum: 1, pageSize: 20 });
		};
		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.title = config.title;
			state.form.order_sn = config.data.order_sn;
			state.form.type = config.data.type;
			_orderSelectShipperCode({ pageNum: 1, pageSize: 20 });
		};
		// 表单重置
		const reset = () => {
			state.form = {
				freight_name: '',
				freight_sn: '',
				freight_number: '',
				order_sn: '',
				type: 1,
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadThumbRef.value as any)?.reset();
			});
		};
		// 快递公司搜索
		const companyRemoteMethod = (query: string) => {
			if (query) {
				state.companyLoading = true;
				_orderSelectShipperCode({ pageNum: 1, pageSize: 20, name: query });
			} else {
				state.companyOptions = [];
			}
		};

		/********** 网络请求 **********/
		// 查询快递编码
		const _orderSelectShipperCode = (_data: object) => {
			orderSelectShipperCode(_data)
				.then((res: any) => {
					console.log('查询快递编码', res);
					state.companyOptions = res.data.list;
					state.companyLoading = false;
				})
				.catch(() => {
					state.companyLoading = false;
				});
		};
		// 订单发货-单个
		const _orderDelivery = (_data: object) => {
			orderDelivery(_data)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};
		// 修改快递单号
		const _orderUpdateFreight = (_data: object) => {
			orderUpdateFreight(_data)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			imageUploadThumbRef,
			onSubmitForm,
			openDialog,
			onCancel,
			onCompanyFocus,
			onChangeCompany,
			onCompanyClear,
			companyRemoteMethod,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
